<template>
	<view class="content">
		<!-- <view class="top-title">
			<view class="loaction" @click="show = true">
				<image src="../../static/img/tjrj.png" mode=""></image>
				<view class="text">为您的宠物写日记吧~</view>
			</view>
		</view> -->
		<view class="home-bar" :style="{ height: statusBarHeight + titleBarHeight + 'px' }">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view :style="{ height: titleBarHeight + 'px' }" class="bar-content">
				<view class="loaction" @click="uploadFile">
					<image src="../../static/img/tjrj.png" mode=""></image>
					<view class="text">为您的宠物写日记吧~</view>
				</view>
			</view>
		</view>
		<view class="popup" v-if="shows">
			<view class="popup-text" @click="setTips">
				<span>快来为宠物创建日记吧</span>
				<u-icon name="close" color="#FF9A00" style="margin-left: 30rpx;" size="28"></u-icon>
			</view>
			<view class="triangle-up"></view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<view
					@click="goPublished(1)"
					style="width: 100%;height: 120rpx;display: flex;align-items: center;justify-content: center;font-size: 28rpx;border-bottom: 1px solid #f2f2f2;"
				>
					图片日记
				</view>
				<view @click="goPublished(2)" style="width: 100%;height: 120rpx;display: flex;align-items: center;justify-content: center;font-size: 28rpx;">视频日记</view>
			</view>
		</u-popup>
		<view class="data-waik">
			<mescroll-uni class="u-skeleton" style="width: 100%;" :height="windowHeight + 'px'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<u-waterfall v-model="dataList" style="width: 100%;position: relative;right: -10rpx;top: 20rpx;" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" style="margin-bottom: 20rpx;margin-left: 10rpx;" @click="setUrl(item.type,item.id)" v-for="(item, index) in leftList" :key="index">
							<div class="item-content u-skeleton-fillet">
								<image src="../../static/img/spbf.png" v-if="item.type == 2" style="width: 50rpx;height: 50rpx;position: absolute;right: 15rpx;top: 15rpx;z-index: 11;" mode=""></image>
								<view class="item-content-img">
									<image :src="item.cover" mode="widthFix"></image>
								</view>
								<view class="item-content-title">
									{{item.title?item.title:'暂无'}}
								</view>
								<view class="item-user">
									<view class="item-user-left">
										<image :src="item.userAvatar?item.userAvatar:'../../../static/user/bg.png'"></image>
										<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size: 24rpx;color: #595959;">{{item.userName}}</span>
									</view>
									<view class="item-user-right">
										<span>{{item.views}}</span>
										<image src="../../static/img/lll.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;" mode=""></image>
										<!-- <u-icon name="eye" color="#666666" style="margin-right: 10rpx;" size="28"></u-icon> -->
									</view>
								</view>
							</div>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" style="margin-bottom: 20rpx;margin-right: -20rpx;" @click="setUrl(item.type,item.id)" v-for="(item, index) in rightList" :key="index">
							<div class="item-content u-skeleton-fillet">
								<image src="../../static/img/spbf.png" v-if="item.type == 2" style="width: 50rpx;height: 50rpx;position: absolute;right: 15rpx;top: 15rpx;z-index: 11;" mode=""></image>
								<view class="item-content-img">
									<image :src="item.cover" mode="widthFix"></image>
								</view>
								<view class="item-content-title">
									{{item.title?item.title:'暂无'}}
								</view>
								<view class="item-user">
									<view class="item-user-left">
										<image :src="item.userAvatar?item.userAvatar:'../../../static/user/bg.png'"></image>
										<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size: 24rpx;color: #595959;">{{item.userName}}</span>
									</view>
									<view class="item-user-right">
										<span>{{item.views}}</span>
										<image src="../../static/img/lll.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;" mode=""></image>
									</view>
								</view>
							</div>
						</view>
					</template>
				</u-waterfall>
				<!-- <div class="waterfall">
					<div class="item" @click="setUrl(item.type, item.id)" v-for="(item, index) in dataList" :key="index">
						<div class="item-content u-skeleton-fillet">
							<image
								src="../../static/img/spbf.png"
								v-if="item.type == 2"
								style="width: 50rpx;height: 50rpx;position: absolute;right: 15rpx;top: 15rpx;z-index: 11;"
								mode=""
							></image>
							<view class="item-content-img"><image :src="item.cover" mode="widthFix"></image></view>
							<view class="item-content-title">{{ item.title ? item.title : '暂无' }}</view>
							<view class="item-user">
								<view class="item-user-left">
									<image :src="item.userAvatar ? item.userAvatar : '../../../static/user/bg.png'"></image>
									<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ item.userName }}</span>
								</view>
								<view class="item-user-right">
									<span>{{ item.views }}</span>
									<u-icon name="eye" color="#666666" style="margin-right: 10rpx;" size="28"></u-icon>
								</view>
							</view>
						</div>
					</div>
				</div> -->
			</mescroll-uni>
			<u-skeleton :loading="loading" :animation="true" bgColor="#f2f2f2"></u-skeleton>
		</view>
	</view>
</template>

<script>

	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()

export default {
	mixins: [MescrollMixin],
	data() {
		return {
			title: 'Hello',
			// show: false,
			dataList: [],
			// dataList: [
			// 	'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
			// 	'人生得意须尽欢，莫使金樽空对月',
			// 	'天生我材必有用，千金散尽还复来',
			// 	'人生得意须尽欢，莫使金樽空对月',
			// 	'天生我材必有用，千金散尽还复来',
			// 	'人生得意须尽欢，莫使金樽空对月',
			// 	'天生我材必有用，千金散尽还复来',
			// 	'天生我材必有用，千金散尽还复来',
			// ],
			shows: false,
			tips: 1,
			total: 0,
			page: 1,
			size: 10,
			loading: true,
			statusBarHeight: 0,
			titleBarHeight: 0,
			windowHeight: 0,
			fileIndex: 0
		}
	},
	onReachBottom() {
		this.loadStatus = 'loading';
		// 模拟数据加载
		setTimeout(() => {
			this.addRandomData();
			this.loadStatus = 'loadmore';
		}, 1000)
	},
	onLoad() {
		if (systemInfo.model.indexOf('iPhone') !== -1) {
		  this.titleBarHeight = 44
		} else {
		  this.titleBarHeight = 48
		}
		this.statusBarHeight = systemInfo.statusBarHeight
		this.windowHeight = systemInfo.windowHeight - systemInfo.statusBarHeight - this.titleBarHeight
	},
	mounted() {
		this.page = 1
		this.remarkShow = false
		this.getData()
		let tips = uni.getStorageSync('PetTips')
		if(tips == 1){
			this.shows = true
		}else{
			this.shows = false
		}
	},
	methods: {
		uploadFile(){
			let self = this
			uni.chooseMedia({
				count: 5,
				compressed: false,
				mediaType: ['image','video'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					let data = res.tempFiles[0].tempFilePath.split('.')
					let imgList = []
					let videoList = []
					res.tempFiles.forEach((item,index)=>{
						if(item.tempFilePath.split('.')[1] == 'mp4'){
							videoList.push(item.tempFilePath)
							
							return false
						}
						if(item.tempFilePath.split('.')[1] == 'png' || item.tempFilePath.split('.')[1] == 'jpg' || item.tempFilePath.split('.')[1] == 'jpeg'){
							imgList.push(item.tempFilePath)
						}else{
							uni.showToast({
								title: '只能上传图片或者视频',
								duration:1000,
								icon: 'none'
							})
						}
					})
					self.$nextTick(function(){
						if(videoList.length > 0){
							uni.navigateTo({
								url: '../../myPackageA/diary/PublishedDiary/PublishedDiary?type='+2+'&url='+videoList[0]
							})
						}
						if(videoList.length == 0 || imgList.length > 0){
							let datas = {
								imgFlieList:imgList.toString()
							}
							datas = JSON.stringify(datas)
							uni.navigateTo({
								url: '../../myPackageA/diary/imgCutVip/main?dataList=' + datas
							})
							// uni.navigateTo({ 
							// 	url: '../../myPackageA/diary/PublishedDiary/PublishedDiary?type='+1+'&url='+imgList.toString()
							// })
						}
					})
				}
			})
		},
		setTips(){
			let tips = uni.setStorageSync('PetTips',2)
			if(tips == 1){
				this.shows = true
			}else{
				this.shows = false
			}
		},
		goPublished(e){
			uni.navigateTo({
				url: '../../myPackageA/diary/PublishedDiary/PublishedDiary?type='+e
			})
			this.show = false
		},
		getData(){
			let self = this;
			this.loading = true
			self.$request(self.commonApi.diaryLists+self.page+'/'+self.size,'GET').then(res=>{
				let data = res.data.data
				self.total = data.meta.total
				self.dataList = data.result
				self.loading = false
			})
		},
		setUrl(type,id){
			if(type == 2){
				uni.navigateTo({
					url: '../../myPackageA/diary/player/player?id='+id
				})
			}else{
				uni.navigateTo({
					url: '../../myPackageA/diary/Detail/diaryDetail?id='+id
				})
			}
		},
		downCallback () {
			this.mescroll.resetUpScroll()
			this.$refs.uWaterfall.clear();
		},
		upCallback (page) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条
			this.$request(this.commonApi.diaryLists + pageNum + '/' + pageSize, 'GET').then(res=>{
				let data = res.data.data.result
				if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
				data.forEach(item=>{
					this.dataList.push(item)
				})
				// this.dataList = this.dataList.concat(data); //追加新数据
				this.mescroll.endBySize(res.data.data.meta.perPage, res.data.data.meta.total);
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.home-bar {
	position: sticky;
	top: 0;
	z-index: 999;
	font-size: 28rpx;
	font-weight: 600;
	width: 750rpx;
	background-color: #fff;
	.bar-content {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		.content-info {
			text-align: center;
			position: absolute;
			left: 325rpx;
			.info-nickname {
				font-size: 32rpx;
				font-weight: 700;
				color: #333333;
				line-height: 44rpx;
			}
			.info-pid {
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
			}
		}
	}
}
.popup-text {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	font-size: 28rpx;
	color: #ff9a00;
	padding: 15rpx 25rpx;
	background: #fff4e0;
	border-radius: 15rpx;
	top: 0;
	left: 20rpx;
	z-index: 2;
}
.popup {
	width: 100%;
	position: relative;
	z-index: 9999;
}
.triangle-up {
	position: absolute;
	top: -20rpx;
	left: 30rpx;
	width: 0;
	height: 0;
	border-left: 15rpx solid transparent;
	border-right: 15rpx solid transparent;
	border-bottom: 30rpx solid #fff4e0;
	z-index: 2;
}
.item-user-left {
	width: 230rpx;
	display: flex;
	align-items: center;
	flex-direction: row;
	image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}
	span {
		margin-left: 10rpx;
	}
}
.item-user-right {
	width: 100rpx;
	display: flex;
	font-size: 24rpx;
	color: #5D5D5D;
	align-items: center;
	flex-direction: row-reverse;
}
.item-user {
	width: 100%;
	height: 70rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	font-size: 26rpx;
	color: #666666;
	padding: 0 15rpx;
}
.waterfall {
	width: 100%;
	column-count: 2;
	column-gap: 0;
	padding: 10rpx 8rpx 0 8rpx;
}
.item {
	box-sizing: border-box;
	break-inside: avoid;
	padding: 8rpx 10rpx 10rpx 10rpx;
}
.item-title {
	width: 100%;
	max-height: 96rpx;
	padding: 15rpx 15rpx 20rpx 15rpx;
	font-size: 28rpx;
	font-weight: bold;
	// background: white;
	color: #313131;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.item-content {
	width: 347rpx;
	display: flex;
	flex-direction: column;
	height: auto;
	box-sizing: border-box;
	background: white;
	overflow: hidden;
	border-radius: 15rpx;
	position: relative;
	.item-content-img {
		width: 100%;
		image {
			width: 100%;
			min-height: 100%;
			zoom: 0.5;
			border-radius: 15rpx 15rpx 0 0;
			position: relative;
			z-index: 10;
		}
	}
	.item-content-title {
		padding-left: 15rpx;
		color: #343434;
		font-weight: 600;
	}
}

.data-waik {
	width: 100%;
	height: calc(100vh - 120rpx);
	// background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	pading: 10rpx 0 10rpx 10rpx;
	// padding-top: 30rpx;
	// position: absolute;
	// top: 200rpx;
	// left: 0;
	// display: flex;
	// align-items: center;
	// justify-content: center;
}
.scroll {
	width: 100%;
	display: flex;
	align-items: center;
	// background: #f2f2f2;
}
.loaction {
	display: flex;
	align-items: center;
	flex-direction: row;
	z-index: 10;
	// background: red;
	border-radius: 20px;
	position: absolute;
	left: 15rpx;
	image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}
}
.title-left {
	width: 175rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
	flex-direction: row;
	margin-left: 20rpx;
	position: relative;
}
.top-title {
	width: 100%;
	height: 180rpx;
	display: flex;
	align-items: center;
	background: white;
	flex-direction: row;
	position: relative;
	z-index: 9999;
}
.content {
	width: 100%;
	height: 100vh;
	background: #f2f2f2;
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
